<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Accordion Demos</title>

		<script src="../../../scripts/jquery.js" type="text/javascript"></script>
		<script src="../../../scripts/jquery_ui/jquery.ui.core.js" type="text/javascript"></script>
		<script src="../../../scripts/jquery_ui/jquery.ui.widget.js" type="text/javascript"></script>

		<link href="../../../themes/default/ui.css" type="text/css" rel="stylesheet" />

		<script type="text/javascript" src="jquery.ui.accordion.js"></script>
		<link href="jquery.ui.accordion.css" type="text/css" rel="stylesheet" />

		<link type="text/css" href="../../demos.css" rel="stylesheet" />
		<script src="../../demos.js" type="text/javascript"></script>

		<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
		

		<!-- 查看源代码引入文件 -->
		<script type="text/javascript"
			src="../../syntaxhighlighter/viewsource.js"></script>

		<script>
		var _accordion = null ;
	
		//初始化事件
		var initEvents = {
			'content-default':function() {
				$("#accordion").accordion({
					collapsible: true
				});
			},
			'content-mouse':function(){
				$("#accordion-mouse").accordion({
					event: "mouseover"
				});
			},
			'content-custom':function(){
				var icons = {
					header: "ui-icon-circle-arrow-e",
					headerSelected: "ui-icon-circle-arrow-s"
				};
				$("#accordion-custom").accordion({
					icons: icons
				});
			}
		}
	</script>
	</head>

	<body>
		<div class="demos-nav">
			<h4>
				折叠控件示例
			</h4>
			<ul>
				<li>
					<a href="content-default">鼠标点击事件</a>
				</li>
				<li>
					<a href="content-mouse">鼠标移动事件</a>
				</li>
				<li>
					<a href="content-custom">自定义图标</a>
				</li>
			</ul>
		</div>

		<div class='demos-content'>
			<div id='content-default' class='demo'>
				<h1>
					鼠标点击展开
				</h1>
				<div id="accordion">
					<h3>
						<a href="#">jQuery简介</a>
					</h3>
					<div>
						<p>
							jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006
							年初创建的，它有助于简化 JavaScript™ 以及Ajax
							编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby.
							它是一个简洁快速灵活
							的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
						</p>
					</div>
					<h3>
						<a href="#">jQuery特点</a>
					</h3>
					<div>
						<p>
						<pre>代码简练、语义易懂、学习快速、文档丰富。
jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的为jQuery扩展其他功能。
能将JS代码和HTML代码完全分离，便于代码和维护和修改。
插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。 </pre>
						</p>
					</div>
					<h3>
						<a href="#">相关站点</a>
					</h3>
					<div>
						<p>
							官方站点：
							<a target='_blank' href='http://jquery.com/'>http://jquery.com/</a>
							中文站点：
							<a target='_blank' href='http://jquery.org.cn/'>http://jquery.org.cn/</a>
						</p>
					</div>
				</div>
				<br />
				<div class='ui-state-highlight'>
					<pre>
	js脚本：
	$("#accordion").accordion({
			collapsible: true
	});
			</pre>
				</div>
			</div>

			<div id='content-mouse' class='demo'>
				<h1>
					鼠标移动展开
				</h1>
				<div id="accordion-mouse">
					<h3>
						<a href="#">jQuery简介</a>
					</h3>
					<div>
						<p>
							jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006
							年初创建的，它有助于简化 JavaScript™ 以及Ajax
							编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby.
							它是一个简洁快速灵活
							的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
						</p>
					</div>
					<h3>
						<a href="#">jQuery特点</a>
					</h3>
					<div>
						<p>
						<pre>代码简练、语义易懂、学习快速、文档丰富。
jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的为jQuery扩展其他功能。
能将JS代码和HTML代码完全分离，便于代码和维护和修改。
插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。 </pre>
						</p>
					</div>
					<h3>
						<a href="#">相关站点</a>
					</h3>
					<div>
						<p>
							官方站点：
							<a target='_blank' href='http://jquery.com/'>http://jquery.com/</a>
							中文站点：
							<a target='_blank' href='http://jquery.org.cn/'>http://jquery.org.cn/</a>
						</p>
					</div>
				</div>
				<br />
				<div class='ui-state-highlight'>
					<pre>
	js脚本：
	$("#accordion-mouse").accordion({
		event: "mouseover"
	});
			</pre>
				</div>
			</div>

			<div id='content-custom' class='demo'>
				<h1>
					自定义图标
				</h1>
				<div id="accordion-custom">
					<h3>
						<a href="#">jQuery简介</a>
					</h3>
					<div>
						<p>
							jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006
							年初创建的，它有助于简化 JavaScript™ 以及Ajax
							编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby.
							它是一个简洁快速灵活
							的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
						</p>
					</div>
					<h3>
						<a href="#">jQuery特点</a>
					</h3>
					<div>
						<p>
						<pre>代码简练、语义易懂、学习快速、文档丰富。
jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的为jQuery扩展其他功能。
能将JS代码和HTML代码完全分离，便于代码和维护和修改。
插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。 </pre>
						</p>
					</div>
					<h3>
						<a href="#">相关站点</a>
					</h3>
					<div>
						<p>
							官方站点：
							<a target='_blank' href='http://jquery.com/'>http://jquery.com/</a>
							中文站点：
							<a target='_blank' href='http://jquery.org.cn/'>http://jquery.org.cn/</a>
						</p>
					</div>
				</div>
				<br />
				<br />
				<div class='ui-state-highlight'>
					<pre>
	js脚本：
	var icons = {
		header: "ui-icon-circle-arrow-e",
		headerSelected: "ui-icon-circle-arrow-s"
	};
	$("#accordion-custom").accordion({
		icons: icons
	});
			</pre>
				</div>
			</div>

		</div>
	</body>
</html>